<template>
  <div class="userSearch">
    <div class="search">
      <!-- 搜索结果页面 -->
      <div class="searchResult" v-for="item in searchObj" :key="item.type">
        <div v-show="item.itemlist.length > 0 && item.name != '单曲'">
          <div class="searchSingerTitle">{{ item.name }}</div>
          <div
            class="searchSingerItem"
            v-for="list in item.itemlist"
            :key="list.id"
            @click="selectItem(item, list)"
          >
            <img :src="list.pic" v-if="list.pic" />
            <p>{{ list.name }}</p>
          </div>
        </div>
        <div v-show="item.itemlist.length <= 0 && item.name != '单曲'">
          <div class="searchSingerTitle">{{ item.name }}</div>
          <p class="searchSingerItem">没有找到相关信息~</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    searchMsg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      searchObj: [],
      historySearch: [],
      timer: {}
    }
  },
  watch: {
    searchMsg () {
      // 500ms防抖 控制请求次数
      clearTimeout(this.timer)
      let context = this
      if (this.searchMsg === '') {
        this.searchObj = []
        return
      }
      this.timer = setTimeout(function () {
        context.goSearch()
      }, 500)
    }
  },
  methods: {
    ...mapMutations(['setAlbum', 'setType', 'setSinger', 'setCurrentIndex', 'setPlayList', 'setSequenceList', 'setFullScreen']),
    // 请求搜索
    async goSearch () {
      const { data: { data: res } } = await this.$http.get('/api/search/quick?key=' + this.searchMsg)
      this.searchObj = res
      // console.log(res)
    },
    // 选项分类
    selectItem (item, list) {
      if (item.name === '专辑') {
        let album = []
        album.push(list)
        album.forEach(item => {
          item.id = list.id
          item.albumMID = list.mid
          item.cover = list.pic
          item.title = list.name
        })
        this.setAlbum(album[0])
        this.setType('专辑')

        // 到这里之前都没有问题

        // 跳转
        this.$router.push('/album/id=' + album[0].id)
      }
      if (item.name === '歌手') {
        let singer = []
        singer.push(list)
        singer.forEach(item => {
          item.singer_mid = list.mid
          item.singer_pic = list.pic
          item.singer_name = list.name
          item.singer_id = list.id
        })
        this.$router.push({
          path: '/singer/mid=' + singer[0].singer_mid
        })
        this.setSinger(singer[0])
        this.setType('歌手')
      }

      //  单曲端口有问题 请求不到数据
      // if (item.name === '单曲') {
      //   this.searchOne(list.name , list.singer)   端口API不对 请求不到数据
      //   this.searchOne(list.id)
      // }
      if (item.name === 'MV') {
        this.$router.push('/mv/' + list.vid)
      }
      this.local()
    },
    // 单曲搜索

    // 由于API端口不对 重写了
    // async searchOne (name, singer) {
    //   const { data: { data: res } } = await this.$http.get('/api/song/find?key=' + `${name + singer}`)
    //   console.log(res)
    // res.mid = res.songmid
    // res.name = res.songname
    // res.album = {
    //   id: res.albumid,
    //   mid: res.albummid,
    //   name: res.albumname
    // }
    // let musicList = []

    // musicList.push(res)
    // // 传递当前播放歌曲的索引
    // this.setCurrentIndex(0)
    // // 传递当前播放歌曲列表
    // this.setPlayList(musicList)
    // // 传递顺序播放列表
    // this.setSequenceList(musicList)
    // // 是否全屏
    // this.setFullScreen(true)
    // },

    // 重写后还是不行 看来服务器有问题
    // async searchOne (id) {
    //   console.log(id)
    //   const res = await this.$http.get('/api/song/url?id=' + id)
    //   console.log(res)
    // },
    local () {
      this.historySearch = JSON.parse(localStorage.getItem('historySearch')) || []
      // 进行本地存储
      // 去重
      this.historySearch.forEach((item, index) => {
        if (item === this.searchMsg) {
          this.historySearch.splice(index, 1)
        }
      })
      // 历史搜索最多留6个
      if (this.historySearch.length === 6) {
        this.historySearch.pop()
      }
      this.historySearch.unshift(this.searchMsg)
      localStorage.setItem('historySearch', JSON.stringify(this.historySearch))
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/variable.styl"
.userSearch {
  position: fixed;
  margin: 0 20px;
  width: calc( 100% - 40px);
  color: $color-text-d;
  background: $color-highlight-background;
  z-index: 2;
  .search {
    .searchResult {
      .searchSingerTitle {
        font-size: 16px;
        padding: 10px 10px 5px;
        color: $color-theme;
      }
      .searchSingerItem {
        display: flex;
        padding: 5px 20px;
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
        p {
          color: $color-text-d;
          font-size: 14px;
          align-self: center;
          padding-bottom: 5px;
        }
      }
    }
  }
}
</style>
